<template>
  <div class="search">
    <van-nav-bar title="搜索中心" left-arrow></van-nav-bar>
    <!-- 
    输入过程中
        1：定义接口api
        2:导入
        3：调用
        4：存储并渲染
            存储时字符要有红色处理
    历史记录存储
        输入后点击搜索时存储       
        点击联想词时存储
    持久化
        1：修改后存储到浏览器
        cookie   js-cookie    get  set  remove                  
        2：初始值读取浏览器
    搜索结果 页
        1：创建组件
        2：配制路由
        3：点击时跳转且传值搜索词
        4：获取搜索调用接口获取列表数据渲染
     -->
    <van-search
      v-model.trim="inputVal"
      show-action
      @input="inputSearch"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">
          搜索
        </div>
      </template>
    </van-search>
    <van-cell-group v-if="inputVal && optionsList.length">
      <van-cell
        v-for="(item, index) in optionsList"
        :key="index"
        @click="saveHistroy(item)"
      >
        <template #title>
          <div v-html="item.html"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in histroyList"
        :key="index"
        @click="goResult(item)"
      ></van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { suggestion } from '@/api/search'
import { setCookie, getCookie } from '@/utils/cookie'
export default {
  data () {
    return {
      inputVal: '',
      optionsList: [],
      interval: '',
      histroyList: JSON.parse(getCookie('histroyList') || '[]')
      // "koa"===> 'ko<span style="color:red;">a</span>'
    }
  },
  methods: {
    // 防抖方法:倒计时执行某个事件，倒计时时间内再次请求执行，先清除上一次的倒计时，重新倒计时执行
    // 节流：倒计时执行某个事件，倒计时时间内再次请求执行，不理
    inputSearch () {
      clearTimeout(this.interval)
      this.interval = setTimeout(() => {
        this.inputEvent()
      }, 500)
    },
    // 输入事件
    async inputEvent () {
      if (this.inputVal === '') {
        return
      }
      const res = await suggestion({ q: this.inputVal })
      if (res.data.data.options[0] === null) {
        this.optionsList = []
      } else {
        // ['abc','acd']
        this.optionsList = res.data.data.options.map(item => {
          // 生成正则列表式，g:全局  i:不区分大小写
          const reg = new RegExp(this.inputVal, 'gi')
          //   通过正则表达式字符替换
          return {
            val: item,
            html: item.replace(
              reg,
              `<span style="color:red;">${this.inputVal}</span>`
            )
          }
        })
        console.log(this.optionsList)
      }
    },
    // 搜索
    onSearch () {
      if (this.inputVal === '') {
        return
      }
      if (!this.histroyList.includes(this.inputVal)) {
        this.histroyList.push(this.inputVal)
        setCookie('histroyList', JSON.stringify(this.histroyList))
      }
      this.goResult(this.inputVal)
    },
    // 联想词点击
    saveHistroy (val) {
      if (!this.histroyList.includes(val.val)) {
        this.histroyList.push(val.val)
        setCookie('histroyList', JSON.stringify(this.histroyList))
      }
      this.goResult(val.val)
    },
    // 跳转到结果页
    goResult (key) {
      // URL地址传入特别字符时  加密：encodeURIComponent（字符串）  解密：decodeURIComponent(加密字符)
      this.$router.push('/result/' + encodeURIComponent(key))
    }
  }
}
</script>
<style></style>
